<template>
  <div class='container'>
    <el-card>
       <!-- 顶部form表单 -->
       <el-form :inline="true">
        <el-form-item label="关键字" >
        <el-input v-model="search.keyword" placeholder="根据文章列表搜索" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="search.state" clearable placeholder="请选择">
    <el-option label="启用" value=1></el-option>
    <el-option label="禁用" value=0></el-option>
  </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="doClean">清除</el-button>
        </el-form-item>
         <el-form-item>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </el-form-item >
          <el-form-item style="float: right;" >
          <el-button  icon="el-icon-edit" type="success" @click="doAdd">新增技巧</el-button>
        </el-form-item>
      </el-form>
         <!-- 数据记录 -->
        <el-alert
          type="info"
          class="alert"
          show-icon
        >共 {{total}}条记录</el-alert>
        <!-- end -->
        <!-- 标签列表结构 -->

      <el-table :data="artList">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column  width="470" label="文章标题" prop="title" >
          <template slot-scope="{row}">
            {{row.title}}
              <i class="fa fa-film" @click="video(row.videoURL)" v-if="row.videoURL"></i>
          </template>

        </el-table-column>
        <el-table-column label="阅读数" prop="visits"  width="180"></el-table-column>
        <el-table-column label="录入人" prop="username" width="220"></el-table-column>
        <el-table-column label="录入时间" prop="createTime" width="340"></el-table-column>
        <el-table-column label="状态" prop="state" ></el-table-column>
          <el-table-column label="操作">
        <template slot-scope="{row}">

       <el-button type="text" @click="doPreview(row)">预览</el-button>
           <el-button type="text" @click="handleStatus(row)">
        <span v-if="row.state==='已禁用'">启用</span>
        <span v-else>禁用</span>
       </el-button>
          <el-button type="text"  @click="doUpdate(row)" :disabled='row.disabled' >修改</el-button>
          <el-button type="text" @click="doDelete(row)" :disabled='row.disabled' >删除</el-button>

        </template>
</el-table-column>
      </el-table>
 <!-- 底部分页器 -->
  <el-pagination style="float: right;padding: 20px 0;"
  background=""
 @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParams.page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pageParams.pagesize"
      layout=" prev, pager, next, sizes,jumper"
      :total="total">
    </el-pagination>
    </el-card>
       <!-- 新增标签弹层 -->
    <el-dialog :title="cTitle" :visible.sync="dialogVisible"
     :close-on-click-modal="false"
   :close-on-press-escape="false"
   @close="dialogClose"
   width='50%'
   >
<el-form ref="form" :model="formData" :rules="rules" label-width="80px">

  <el-form-item label="文章标题" prop="title" >
    <el-input v-model="formData.title" placeholder="请输入文章标签"></el-input>
  </el-form-item>
  <el-form-item label="文章内容" prop="articleBody" >
    <quillEditor ref="myQuillEditor" class="editor" :content="content" :options="editorOption" v-model="formData.articleBody">

    </quillEditor>
  </el-form-item>
  <el-form-item label="视频地址">
    <el-input type="text" placeholder="请输入视频地址" v-model="formData.videoURL"></el-input>
  </el-form-item>
 <el-form-item style="text-align: right;">
    <el-button @click="doCancel" >取消</el-button>
    <el-button type="primary" @click="hSubmit">确认</el-button>
  </el-form-item>
</el-form>
    </el-dialog>
    <!-- 预览弹层 -->
    <el-dialog title="预览文章" :visible.sync="previewVisible"
     :close-on-click-modal="false"
   :close-on-press-escape="false"
  @close="ClosePreview"
  width='50%'
   >
  <div class="preview-box">
      <div class="preview-title">{{ formData.title }}</div>
      <div class="preview-nav">
        <span>{{ formData.createTime }}</span>
        <span>{{ formData.username }}</span>
        <span class="el-icon-view"></span>
        <span>{{ formData.visits }}</span>
      </div>
      <div class="preview-content" v-html="formData.articleBody">

      </div>
    </div>
  </el-dialog>
       <!-- 视频区域 -->
    <div class="video" v-if="isVideo">
      <div class="video-ico" @click="closeVideo()"><span class="el-icon-close" aria-hidden="true"></span></div>
      <div class="video-box">
        <video controls autoplay :src="isVideo"></video>
      </div>
    </div>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { list, add, remove, changeState, update } from '@/api/hmmm/articles'
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      artList: [], // 文章列表
      dialogVisible: false, // 是否显示新增/修改的弹层
      previewVisible: false, // 控制预览弹层是否显示
      isEdit: false, // 编辑状态
      id: '', // 用来存储删除/修改时对应文章列表项目的id值
      isVideo: null, // 判断视频是否打开
      // 顶部搜索栏
      search: {
        keyword: '', // 搜索关键字
        state: ''// 状态选择
      },
      // 弹层数据存储
      formData: {
        title: '', // 弹层文章标题
        articleBody: '', // 弹层文章内容
        videoURL: null// 弹层视频地址
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ]
      },
      // 分页器数据存储
      pageParams: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      content: '',
      // 富文本工具栏
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
          ]
        }
      }
    }
  },

  created () {
    // 调用加载文章列表方法
    this.loadartList()
  },
  computed: {
    cTitle () {
      return this.isEdit ? '修改文章' : '新增文章'
    }
  },
  methods: {
    // 加载文章列表
    async loadartList () {
      const { data } = await list(this.pageParams)
      this.artList = data.items
      // 获取数据条数
      this.total = data.counts
      // 遍历修改state状态值
      this.artList.forEach(item => {
        if (item.state === 1) {
          item.state = '已启用'
          item.disabled = true
        } else {
          item.state = '已禁用'
          item.disabled = false
        }
      })
      // console.log(data, '文章列表')
    },
    // 点击清除按钮，将输入框的内容清空
    doClean () {
      this.search = {}
    },
    // 搜索信息
    async handleFilter () {
      this.pageParams.keyword = this.search.keyword
      if (this.pageParams.page !== 1) {
        this.pageParams.page = 1
      }
      if (this.search.state !== '0' && this.search.state !== '1') {
        this.loadartList()
      } else {
        const { data } = await list({ keyword: this.search.keyword, state: this.search.state, page: this.pageParams.page, pagesize: this.pageParams.pagesize })
        // 请求的数据存储到artList里
        this.artList = data.items
        // 重新把total计数
        this.total = data.counts
        // 遍历tagsList数组,给相应的修改删除按钮添加上disabled属性
        this.artList.forEach(item => {
          if (item.state === 1) {
            item.state = '已启用'
            item.disabled = true
          } else {
            item.state = '已禁用'
            item.disabled = false
          }
        })
        console.log(data, '搜索功能')
      }
    },
    // 点击新增技巧
    doAdd () {
      // 显示弹层
      this.dialogVisible = true
      // 修改编辑状态为false
      this.isEdit = false
    },
    // 封装新增的请求方法
    async hAdd () {
      const data = await add(this.formData)
      console.log(data, '文章添加')
      // 刷新文章列表
      this.loadartList()
      // 关闭弹层
      this.dialogVisible = false
      // 清空表单的信息
      this.dialogClose()
    },
    // 点击确认按钮
    hSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isEdit ? this.hUpdate() : this.hAdd()
        }
      })
    },
    // 点击弹层的取消按钮
    doCancel () {
      this.dialogClose()
      this.dialogVisible = false
    },
    // 弹层关闭触发的方法
    dialogClose () {
      this.formData.title = ''
      this.formData.articleBody = ''
      this.formData.videoURL = ''
      this.$refs.form.resetFields()
    },
    // 点击删除
    doDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.hDelete(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 实现删除功能
    async hDelete (row) {
      // console.log(row, 'row')
      await remove(row)
      if (this.artList.length === 1) {
        this.pageParams.page--
        if (this.pageParams.page <= 0) {
          this.pageParams.page = 1
        }
      }
      // 重新渲染标签列表
      this.loadartList()
    },
    // 启用、禁用
    async handleStatus (row) {
      // const id = row.id
      // const state = row.state
      row.state === '已启用' ? row.state = 0 : row.state = 1
      await changeState(row)
      row.state ? row.state = '已启用' : row.state = '已禁用'
      this.$message.success(`${row.state}`)
      // 刷新列表
      this.loadartList()

      // console.log(data, '启用禁用')
    },
    // 点击修改
    async doUpdate (row) {
      this.dialogVisible = true
      this.isEdit = true
      // 保存id
      this.id = row.id
      // 数据回显
      this.formData.title = row.title
      this.formData.articleBody = row.articleBody
      this.formData.videoURL = row.videoURL
      console.log(row, 'row')
    }, // 封装修改的请求方法
    async hUpdate () {
      const data = await update({ id: this.id, ...this.formData })
      this.loadartList()
      // 关闭弹层
      this.dialogVisible = false
      // 清空弹层的内容
      this.dialogClose()
      console.log(data, 'hUpdate')
    },
    async doPreview (row) {
      console.log(row)
      // 打开预览弹层
      this.previewVisible = true
      this.formData.title = row.title // 获取标题
      this.formData.createTime = row.createTime// 获取录入时间
      this.formData.username = row.username// 获取录入人
      this.formData.visits = row.visits// 获取阅读数
      this.formData.articleBody = row.articleBody// 获取文章内容
    },
    // 关闭预览弹层将formData数据置空
    ClosePreview () {
      this.formData = {}
    },
    // 点击视频图标
    video (row) {
      this.isVideo = row
    },
    // 关闭视频
    closeVideo () {
      this.isVideo = null
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageParams.page = 1
      this.pageParams.pagesize = val
      this.loadartList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.pageParams.page = val
      console.log(this.pageParams.page, '第几页')
      this.loadartList()
    }
  }
}
</script>

<style scoped lang='scss'>

.preview-box {
  .preview-title {
    font-size: 25px;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .preview-nav {
    span {
      margin-right: 10px;
    }
  }
  .preview-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #f5f5f5;
    border-top: 1px dashed #ccc;

  }
}
::v-deep .el-dialog .el-dialog__body{

img{
    width:100% !important;
  }

}
.video {
  z-index: 999;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .video-ico {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-50%, 0);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
  }
  .video-box {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    video {
      width: 100%;
      height: 100%;
    }
  }
}
.fa-film:before {
  color: #0c5ed8;
}
</style>
